<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-collapse-transition>
      <el-card v-show="isFilterVisible" class="search-wrapper">
        <el-form
          ref="searchForm"
          :model="listQuery"
          :inline="true"
          label-width="90px"
        >
          <el-form-item label="负责人:">
            <el-select
              v-model="listQuery.directorId"
              placeholder="请选择负责人"
              clearable
              style="width: 200px"
            >
              <el-option
                v-for="item in directorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="商品:">
            <el-select
              v-model="listQuery.goodsId"
              placeholder="请选择商品"
              clearable
              style="width: 200px"
              @change="handleGoodsSelect"
            >
              <el-option
                v-for="item in goodsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="申请时间:">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              style="width: 350px"
              @change="handleDateChange"
            />
          </el-form-item>

          <el-form-item label="状态:">
            <el-select
              v-model="listQuery.status"
              placeholder="请选择状态"
              clearable
              style="width: 150px"
            >
              <el-option label="全部" value="2" />
              <el-option label="待处理" value="0" />
              <el-option label="已处理" value="1" />
              <el-option label="已驳回" value="-1" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleFilter">查询</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-collapse-transition>

    <!-- 操作按钮区域 -->
    <el-card>
      <div class="table-operations">
        <div class="left-operations">
          <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
          >
            {{ isFilterVisible ? "收起" : "检索" }}
            <i
              :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
            />
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="handleAdd"
          >新增</el-button>
          <el-button size="small" @click="handleAudit">审核</el-button>
          <el-button size="small" @click="handlePrint">打印</el-button>
          <el-button size="small" @click="handleExport">导出</el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete"
          >删除</el-button>
          <el-button size="small" @click="handleMatch">对单</el-button>
        </div>
      </div>

      <!-- 表格 -->
      <el-table
        v-loading="listLoading"
        :data="storeList"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="操作" width="120" fixed="left">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderNo" label="单据编号" width="180" />
        <el-table-column prop="orderDate" label="单据日期" width="120" />
        <el-table-column prop="goodsName" label="商品名称" width="200" />
        <el-table-column
          prop="quantity"
          label="数量"
          width="100"
          align="right"
        />
        <el-table-column prop="price" label="单价" width="100" align="right" />
        <el-table-column prop="amount" label="金额" width="100" align="right" />
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.status === '1'
                  ? 'success'
                  : scope.row.status === '0'
                    ? 'warning'
                    : 'danger'
              "
            >
              {{
                scope.row.status === "1"
                  ? "已处理"
                  : scope.row.status === "0"
                    ? "待处理"
                    : "已驳回"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { selEnterWarehouseListApi } from '@/api/warehouse'

export default {
  name: 'OtherWarehouseReceiptsHistoricalDocuments',
  data() {
    return {
      isFilterVisible: false,
      listQuery: {
        directorId: '', // 负责人ID
        endTime: '', // 结束时间
        goodsId: '', // 商品ID
        page: 1, // 当前页
        pageSize: 10, // 每页条数
        startTime: '', // 开始时间
        status: '' // 状态
      },
      dateRange: [], // 日期范围
      directorList: [], // 负责人列表
      goodsList: [], // 商品列表
      tableData: [], // 表格数据
      storeList: [], // 入库列表
      total: 0, // 总条数
      listLoading: false, // 加载状态
      multipleSelection: [] // 多选数据
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList() {
      this.listLoading = true
      try {
        const res = await selEnterWarehouseListApi(this.listQuery)
        this.storeList = res.records || []
        this.total = res.total || 0
      } catch (error) {
        console.error('获取列表失败:', error)
        this.$message.error('获取列表失败')
      } finally {
        this.listLoading = false
      }
    },

    // 日期改变
    handleDateChange(val) {
      if (val) {
        // 设置开始时间为当天的 00:00:00
        const startDate = new Date(val[0])
        startDate.setHours(0, 0, 0, 0)
        this.listQuery.startTime = Math.floor(startDate.getTime() / 1000)

        // 设置结束时间为当天的 23:59:59
        const endDate = new Date(val[1])
        endDate.setHours(23, 59, 59, 999)
        this.listQuery.endTime = Math.floor(endDate.getTime() / 1000)
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
    },

    // 搜索
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    // 重置搜索
    resetFilter() {
      this.dateRange = []
      this.listQuery = {
        directorId: '',
        endTime: '',
        goodsId: '',
        page: 1,
        pageSize: 10,
        startTime: '',
        status: ''
      }
      this.getList()
    },

    // 每页条数改变
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },

    // 选择商品
    handleGoodsSelect(val) {
      this.listQuery.goodsId = val
      this.handleFilter()
    },

    // 多选变化
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 编辑
    handleEdit(row) {
      this.$router.push(`/warehouse/other-warehouse-receipts/edit/${row.id}`)
    },

    // 审核
    handleAudit() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要审核的记录')
        return
      }
      // TODO: 实现审核逻辑
    },

    // 打印
    handlePrint() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要打印的记录')
        return
      }
      // TODO: 实现打印逻辑
    },

    // 导出
    handleExport() {
      // TODO: 实现导出逻辑
    },

    // 删除
    handleDelete() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要删除的记录')
        return
      }
      this.$confirm('确认删除选中记录?', '提示', {
        type: 'warning'
      })
        .then(() => {
          // TODO: 实现删除逻辑
          this.$message.success('删除成功')
          this.getList()
        })
        .catch(() => {})
    },

    // 对单
    handleMatch() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请选择要对单的记录')
        return
      }
      // TODO: 实现对单逻辑
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.search-wrapper {
  margin-bottom: 20px;
}

.table-operations {
  margin-bottom: 20px;
  .left-operations {
    display: flex;
    gap: 10px;
  }
}

.filter-trigger {
  .el-icon-arrow-down {
    margin-left: 5px;
    transition: transform 0.3s;
    &.is-reverse {
      transform: rotate(180deg);
    }
  }
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>
